<template>
    <div class="leftone">
        <!-- <p>新增确诊TOP10</p> -->
        <div id="one">

        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
import $ from 'jquery'

export default {
    name: "App",
    props: ["width", "height"],
    setup() {
        let myEcharts = echarts;

        onMounted(() => {
            let leftone
            let fn = new Promise((resolve, reject) => {
                //2.jquery中ajax也封装好了jsonp-缺点：1.只能用get方法请求,不能用post 2.还得后台配合你写回调参数
                $.ajax({
                    url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
                    dataType: "jsonp",
                    // jsonp: "callback",//传给后端用来获取jsonp回调函数名的参数名，一般默认是callback。不写也可以
                    // jsonpCallback:"cb",//也可跟后端约定函数名
                    success(res) {
                        // console.log('ajax数据', res);
                        let datalist = JSON.parse(res.data);
                        // console.log(datalist);
                        let left1 = datalist.countryAddConfirmRankList
                        let left2 = datalist.continentStatis
                        let left3 = datalist.foreignList
                        let right1 = datalist.globalDailyHistory
                        let right2 = datalist.countryConfirmWeekCompareRankList
                        let right3 = datalist.importStatis
                        let cont1 = datalist.globalStatis
                        resolve({ left1, left2, left3, right1, right2, right3, cont1 })
                    }
                })
            })

            fn.then(res => {
                // console.log("fn", res);
                leftone = res.left1
                initChart(leftone)
            })
            // initChart(leftone);
        });



        onUnmounted(() => {
            myEcharts.dispose;
        });

        // 第一个
        function initChart(aa) {
            let chart = myEcharts.init(document.getElementById("one"), "purple-passion");
            let x = []
            let y = []
            aa.forEach((item) => {
                // console.log(item);
                x.push(item.nation)
                y.push(item.addConfirm)
                // console.log(x, y);
            })
            // console.log(66, aa);
            chart.setOption({
                // backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '15%',
                    right: '10%',
                    left: '18%',
                    bottom: '20%'
                },
                xAxis: [{
                    type: 'category',
                    data: x,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#e2e9ff',
                        textStyle: {
                            fontSize: 10
                        },
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        formatter: '{value}',
                        color: '#e2e9ff',
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)'
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: y,
                    barWidth: '10px',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [30, 30, 30, 30],
                            shadowColor: 'rgba(0,160,221,1)',
                            shadowBlur: 4,
                        }
                    },
                    label: {
                    }
                }]
            });
            window.addEventListener(
                "resize",
                function (e) {
                    chart.resize();

                },
                false
            );
        }
        return {
            initChart
        };
    }
};

</script>
<style lang="scss" scoped>
#one {
    width: 100%;
    height: 33%;
    padding: 20px;
    border: 1px solid skyblue;
}

p {
    color: #fff;
}
</style>